<template>
  <div
    class="trust-selectCascadeData">
    <span @click="onSelect">
      <span>{{ currentTitle }}</span>
      <i class="trust-selectCascadeData trust-icon icon_select"/>
    </span>
  </div>
</template>

<script>
  import service from '../../service.js'
  import _ from 'lodash'

  export default {
    name: 'SelectCascadeData',
    props: {
      title: {
        type: String,
        default: '请选择'
      },
      value: {
        type: Array,
        default: () => []
      },
      list: {
        type: Array,
        default: () => []
      },
      labelKey: {
        type: String,
        default: 'label'
      },
      valueKey: {
        type: String,
        default: 'value'
      },
      childrenKey: {
        type: String,
        default: 'children'
      }
    },
    computed: {
      currentTitle () {
        if (this.currentValue.length === 0) return this.title
        const target = this.currentValue[this.currentValue.length - 1]
        return _.get(target, this.labelKey)
      },
      currentValue: {
        get () {
          return this.value
        },
        set (val) {
          this.$emit('input', val)
        }
      }
    },
    methods: {
      onSelect () {
        service.Cascader({
          list: this.list,
          selectList: this.value,
          title: '请选择',
          label: this.labelKey,
          children: 'children',
          changeOnSelect: true,
          confirm: (res) => {
            this.currentValue = [].concat(res)
          },
          cancel: () => {}
        })
      }
    }
  }
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
  type="text/stylus">

  .trust-selectCascadeData
    font-family: PingFangSC-Regular
    font-size: 14px
    color: #A2A2A2

    &.is-select
      color: #4A4A4A

    i
      color: currentColor

    &.is-inherit
      font-family: inherit
      color: currentColor
      font-size: inherit
</style>
